<template>
  <div id="body">
    <div id="show">
      <div id="top">
        <router-link to="/userInfo/message">
          <span style="float: left; margin-left: 10px">返回</span>
        </router-link>
        <div style="text-align: center">{{ UserName }}</div>
      </div>
      <div id="middle" v-for="(item, index) in content" :key="index">
        <a-avatar :src="item.head" />
        <span>{{ item.content }}</span>
      </div>
    </div>
    <a-space id="utils">
      <a-button size="small" @click="remove">取消</a-button>
      <a-button type="primary" size="small" @click="sendMs">发送</a-button>
    </a-space>
    <a-textarea v-model:value="MsValue" placeholder="" :rows="4" />
  </div>
</template>
<script>
import { defineComponent, ref } from "vue";
import { useRoute } from "vue-router";
import { doTalk } from "../../api/message";
import { formatTime } from "../../utils/date";
import io from "../../utils/socket";

export default defineComponent({
  setup() {
    const route = useRoute();
    const MsValue = ref("");
    const UserName = ref("");
    const content = ref([]);

    io.on("sendMsg4", (datas) => {
      // console.log(datas);
      content.value.push({
        head: "",
        content: datas,
      });
    });

    if (route.query.uid == null) {
      UserName.value = "管理员";
    } else {
      UserName.value = route.query.name;
      for (let i = 0; i < route.query.content.length; i++) {
        content.value.push({
          head: route.query.head,
          content: route.query.content[i],
        });
      }
    }

    const sendMs = () => {
      if (route.query.uid == null) {
        io.emit("sendMsg", {
          name: "西野七濑",
          head: "http://localhost:3000/" + sessionStorage.getItem("imgUrl"),
          content: MsValue.value,
        });
        content.value.push({
          head: "http://localhost:3000/" + sessionStorage.getItem("imgUrl"),
          content: MsValue.value,
        });
        MsValue.value = "";
      } else {
        let sendTime = formatTime();
        doTalk({
          url: "/message/doTalk",
          MsContent: MsValue.value,
          goalUserId: route.query.uid,
          sendTime: sendTime,
          success: (res) => {
            console.log(res.data);
            MsValue.value = "";
          },
          err: (err) => {
            console.log(err);
          },
        });
      }
    };

    const remove = () => {
      MsValue.value = "";
    };

    // console.log(route.query.uid);
    return {
      MsValue,
      UserName,
      remove,
      sendMs,
      content,
    };
  },
});
</script>
<style scoped>
#body {
  border: 1px solid rgb(131, 131, 131, 0.5);
}
#show {
  width: 100%;
  height: 440px;
  background: white;
  border-bottom: 1px solid rgb(131, 131, 131, 0.5);
}
#top {
  height: 40px;
  padding-top: 8px;
  border-bottom: 1px solid rgb(131, 131, 131, 0.5);
}
#middle {
  margin: 5px 0 5px 5px;
}
#utils {
  float: right;
}
</style>